.open {
    flex: 1;
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    -webkit-animation: fade-in 1s;
       -moz-animation: fade-in 1s;
        -ms-animation: fade-in 1s;
         -o-animation: fade-in 1s;
            animation: fade-in 1s;

    &__showpass {
        position: absolute;
        left: 100%;
        border-radius: var(--block-border-radius);
        @include mobile {
            left: 65px;
        }
        color: #FFF;
        line-height: 3em;
        height: 3.2em;
        margin-left: -65px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 16px;
        padding-right: 16px;
        z-index: 99999;
        cursor: pointer;
        font-size: 1.7em;
        line-height: 1.8;
        @include mobile {
            line-height: 1.9;
        }

        &:hover {
            color: #ec2b55;
            cursor: pointer;
        }
    }

    .mobile & {
        overflow-y: auto;
    }

    &__icons {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-shrink: 0;
        justify-content: center;
        flex-wrap: wrap;
        .open--drag & {
            display: none;
        }
    }

    &__icon {
        @include icon-btn();
        color: var(--open-icon-icon-n-color);
        padding-top: 0;
        margin: 0.2em 0.5em;
        &:hover {
            color: var(--open-icon-icon-h-color);
            background-color: var(--open-icon-box-h-color);
            transition: background-color 0.2s ease-in-out;
            >.open__icon-i {
                color: var(--open-icon-icon-h-color);
            }
        }
        &:focus {
            .open--show-focus & {
                box-shadow: focused-box-shadow();
            }
        }
        &-i {
            font-size: 4em;
            color: var(--open-icon-icon-n-color);
            &:hover {
                color: var(--open-icon-icon-h-color);
            }
        }
        &-text {
            color: var(--open-icon-text-n-color);
            .open__icon:hover > & {
                color: var(--open-icon-text-h-color);
            }
        }
    }

    &__pass {
        &-warning {
            font-size: 1.1em;
            animation: fade-in-partial 1s infinite alternate;
        }
        &-area {
            display: flex;
            align-items: stretch;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            .open--drag & {
                display: none;
            }
        }
        &-warn-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            padding-bottom: 10px;
        }
        &-field-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: stretch;
            flex-shrink: 0;
            margin-bottom: $base-padding-v;
        }
        &-enter-btn,
        &-opening-icon {
            position: absolute;
            left: 100%;
            border-radius: var(--block-border-radius);
            @include mobile {
                left: auto;
                right: 0;
            }
            color: var(--muted-color);
            line-height: 3em;
            height: 3.2em;
            margin-left: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 16px;
            padding-right: 16px;
            > i {
                font-size: 3em;
                line-height: 1;
                @include mobile {
                    line-height: 1.1;
                }
            }
        }
        .open--show-focus & {
            &-enter-btn:focus,
            &-opening-icon:focus {
                box-shadow: focused-box-shadow();
            }
        }
        &-enter-btn {
            :hover {
                color: #ec2b55;
                cursor: pointer;
            }
            .open--file & {
                cursor: pointer;
                &:hover {
                    color: var(--medium-color);
                }
            }
            .open--opening & {
                display: none;
            }
            &-icon-enter {
                display: block;
                .open__pass-enter-btn--touch-id & {
                    display: none;
                }
            }
            &-icon-touch-id {
                display: none;
                .open__pass-enter-btn--touch-id & {
                    display: block;
                }
            }
        }
        &-opening-icon {
            display: none;
            .open--opening & {
                display: block;
            }
        }
    }

    &__config {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        position: relative;
        @include nomobile {
            width: 30em;
        }
        .open--drag & {
            display: none;
        }
        &-buttons {
            align-self: flex-end;
        }
        &-header {
            > i {
                margin-right: 0.3em;
            }
        }
        &-field {
            width: 100%;
        }
        &-error {
            min-height: 1.7em;
        }
        &:not(.open__config--disabled) {
            .open__config-btn-ok-text {
                display: inline;
            }
            .open__config-btn-ok-spinner {
                display: none;
            }
        }
        &.open__config--disabled {
            .open__config-btn-ok-text {
                display: none;
            }
            .open__config-btn-ok-spinner {
                display: block;
            }
        }
    }

    input[type='password'].open__pass-input,
    input[type='text'].open__pass-input {
        font-size: $large-pass-font-size;
        margin-bottom: 10px;
        &[readonly] {
            cursor: pointer;
        }
        width: 38vw;
        padding-right: 65px;
        @media (max-width: 1000px) {
            width: 16em;
        }
        @include mobile {
            width: calc(100vw - 20px);
            padding-left: 55px;
        }
    }

    &__settings {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        padding-left: $base-padding-h;
        height: 2em;
        &-key-file {
            border-radius: var(--block-border-radius);
            .open--file:not(.open--opening) & {
                cursor: pointer;
            }
            .open--key-file & {
                color: var(--medium-color);
            }
            &-icon {
                width: 2em;
            }
            &-dropbox {
                visibility: hidden;
                margin-left: 0.3em;
                &:hover {
                    .open--file & {
                        visibility: visible;
                    }
                }
            }
            &-dropbox {
                .open--key-file,
                .open--opening & {
                    display: none;
                }
            }
            &:hover .open__settings-key-file-dropbox {
                .open--file & {
                    visibility: visible;
                }
            }
            &:focus {
                .open--show-focus & {
                    box-shadow: focused-box-shadow();
                }
            }
        }

        &-key-file,
        &-key-file-dropbox {
            color: var(--muted-color);
            &:hover {
                .open--file:not(.open--opening) & {
                    color: var(--medium-color);
                }
            }
        }

        &-yubikey {
            display: none;
            &--present,
            &--active {
                display: flex;
            }
            &__text {
                margin-right: 0.4em;
                display: none;
                .open__settings-yubikey--active & {
                    display: block;
                }
            }
            &-img {
                fill: var(--muted-color);
                width: 1em;
                position: relative;
                top: -0.22em;
                font-size: 1.5em;
                margin-right: $tiny-spacing;
                cursor: pointer;
                &:hover {
                    fill: var(--text-color);
                }
                .open__settings-yubikey--active & {
                    fill: var(--text-color);
                }
            }
        }
    }

    &__last {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        margin-top: $base-spacing;
        &-item {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;
            flex-shrink: 0;
            .open:not(.open--opening) & {
                @include area-selectable;
            }
            color: var(--muted-color);
            padding: $base-padding;
            border-radius: var(--block-border-radius);
            &:focus {
                .open--show-focus & {
                    box-shadow: focused-box-shadow();
                }
            }
            &-icon {
                width: 2em;
                position: relative;
                top: 0.1em;
            }
            &-text {
                flex-grow: 1;
            }
            &-icon-del {
                opacity: 0;
                .open__last-item:hover & {
                    opacity: 0.3;
                    cursor: pointer;
                    color: var(--open-last-del-h-color);
                }
                color: var(--muted-color);
                &:hover {
                    .open__last-item:hover & {
                        opacity: 1;
                    }
                    color: var(--medium-color);
                }
            }
        }
    }

    &__dropzone {
        display: none;
        .open--drag & {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            justify-content: center;
            align-self: center;
            align-items: center;
            text-align: center;
        }
        &-icon {
            font-size: 10em;
        }
        &-header {
            margin-top: 1em;
        }
    }

    &__message {
        display: flex;
        justify-content: space-between;
        min-width: 20vw;
        background: var(--secondary-background-color);
        border-radius: var(--block-border-radius);
        margin-bottom: $large-padding;
        &-content {
            padding: $medium-padding;
            padding-right: $small-spacing;
        }
        &-cancel-btn {
            padding: $medium-padding;
            padding-left: $small-spacing;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity $base-duration $base-timing;
            &:hover {
                opacity: 1;
            }
            &-icon {
                vertical-align: bottom;
            }
        }
    }
}

.open-list {
    &__content {
        margin: $base-padding-v 0 $base-padding-v (-$base-padding-h);
        max-height: calc(100vh - 22em);
        position: relative;
        overflow: hidden;
    }
    &__scrollable {
        max-height: calc(100vh - 22em);
        width: calc(100% + 50px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    &__files {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 50px);
    }
    &__file {
        cursor: pointer;
        padding: $base-padding;
        border-radius: var(--block-border-radius);
        box-sizing: border-box;
        flex-basis: 100%;
        @include nomobile {
            .open-list--density2 & {
                flex-basis: 50%;
            }
            .open-list--density3 & {
                flex-basis: 33.33333%;
            }
        }
        &:hover {
            background-color: var(--action-background-color-focus-tr);
        }
        &-icon {
            margin-right: 0.3em;
        }
        &--another {
            color: var(--medium-color);
        }
    }
    &__check-label {
        width: 100%;
        display: inline-block;
    }
}

.open-chal-resp {
    &__head {
        padding: $base-padding;
    }
    &__icon {
        margin-right: $small-spacing;
    }
    &__item {
        padding: $base-padding;
        cursor: pointer;
        border-radius: var(--block-border-radius);
        &:hover {
            background-color: var(--action-background-color-focus-tr);
        }
    }
}
